<template>
  <div class="detailPageDef">
    <div class="mainContentWrap">
      <el-form ref="ruleForm" label-width="auto" :model="detailForm" :rules="rules">
        <CustomCollapse title="个人信息">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="活动名称" prop="input">
                <el-input v-model="detailForm.input" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="活动名称" prop="input">
                <el-input v-model="detailForm.input" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="活动名称" prop="input">
                <el-input v-model="detailForm.input" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="12">
              <el-form-item label="活动名称" prop="input">
                <el-input v-model="detailForm.input" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
        </CustomCollapse>
        <CustomCollapse title="活动信息">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
              <el-form-item label="活动名称">
                <el-date-picker v-model="detailForm.detail" type="date" placeholder="选择日期" />
              </el-form-item>
            </el-col>
          </el-row>
        </CustomCollapse>
      </el-form>
    </div>
    <div class="pageBottomButtonGroup">
      <el-button @click="$router.back()">返回</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>

<script>
import CustomCollapse from '@/components/CustomCollapse';

const getDetailFormDef = () => {
  return {
    input: '',
    checkList: []
  };
};

const rules = {
  input: [
    { required: true, message: '请输入', trigger: 'blur' }
  ]
};

export default {
  components: { CustomCollapse },
  data() {
    return {
      rules,
      detailForm: getDetailFormDef()
    };
  },
  created() {
    this.getFormData();
  },
  methods: {
    getFormData() {
      // ...
    },
    handleSave() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          // ...操作成功后更新列表
          this.$parent.$refs.CommonTable.getTableList();
        }
      });
    }
  }
};
</script>
<style lang="scss"></style>
